<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <input 
        type="text" 
        placeholder="请输入法律名称或关键词" 
        class="search-input"
        v-model="searchKeyword"
        @confirm="onSearch"
      />
      <button class="search-btn" @click="onSearch">🔍</button>
    </view>

    <!-- 文件列表（如果未搜索） -->
    <view v-if="!searchKeyword && !fileContent" class="file-list">
      <text class="list-title">选择法律文件：</text>
      <view 
        v-for="file in fileList" 
        :key="file.path" 
        class="file-item"
        @click="loadFile(file.path)"
      >
        <text class="file-name">{{ file.name }}</text>
      </view>
    </view>

    <!-- 搜索结果列表 -->
    <view v-if="searchKeyword && searchResults.length" class="search-results">
      <text class="list-title">搜索结果：</text>
      <view 
        v-for="item in searchResults" 
        :key="item.file + item.lineIndex" 
        class="result-item"
        @click="loadFileAndHighlight(item.file, item.lineIndex)"
      >
        <text class="file-name">{{ item.fileName }}</text>
        <text class="result-preview" v-html="highlightText(item.lineContent, searchKeyword)"></text>
      </view>
    </view>

    <!-- 文件内容展示区 -->
    <scroll-view 
      v-if="fileContent" 
      class="content-area" 
      scroll-y="true"
      @scrolltolower="onScrollToLower"
    >
      <view class="content-text" v-html="highlightText(fileContent, searchKeyword)"></view>
    </scroll-view>

    <!-- 返回按钮 -->
    <view v-if="fileContent" class="back-btn" @click="goBack">
      <text>返回</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      fileList: [
        // 这里可以硬编码，也可以通过其他方式获取（如后端API）
        { name: '中华人民共和国宪法', path: '/static/file/宪法.txt' },
        { name: '中华人民共和国民法典', path: '/static/file/民法典.txt' },
        { name: '中华人民共和国刑法', path: '/static/file/刑法.txt' },
        // ... 添加更多文件
      ],
      fileContent: '', // 当前加载的文件内容
      currentFile: '', // 当前文件路径
      searchResults: [], // 搜索结果
      highlightText: this.highlightText, // 挂载方法到data以便在模板中使用
    };
  },
  onLoad() {
    // 页面加载时，可以默认加载第一个文件或显示文件列表
    // this.loadFile(this.fileList[0].path);
  },
  methods: {
    // 读取文件内容
    async loadFile(filePath) {
      try {
        // 注意：uni-app 中读取本地文件推荐使用 uni.request() 或 require() 方式
        // 但 require() 仅适用于构建时确定的文件，不适合动态路径
        // 更推荐的方式是将txt内容作为js对象导出或通过网络请求获取
        // 这里我们使用 uni.request() 模拟读取本地文件
        // 为了能读取txt，你需要将txt内容通过后端API返回，或者将内容打包进js
        // 一个变通方法是将txt内容放在static目录，通过网络请求获取
        const res = await uni.request({
            url: filePath, // 相对路径
            method: 'GET',
            header: {
                'Content-Type': 'text/plain'
            }
        });
        this.fileContent = res.data;
        this.currentFile = filePath;
        this.searchResults = []; // 清空搜索结果
      } catch (error) {
        console.error('读取文件失败:', error);
        uni.showToast({
          title: '文件读取失败',
          icon: 'error'
        });
      }
    },

    // 加载文件并定位到高亮行
    async loadFileAndHighlight(filePath, lineIndex) {
        try {
            const res = await uni.request({
                url: filePath,
                method: 'GET',
                header: {
                    'Content-Type': 'text/plain'
                }
            });
            this.fileContent = res.data;
            this.currentFile = filePath;
            this.searchResults = [];
            // 简单跳转到内容区，实际高亮在 v-html 中处理
            // 可以通过 scrollIntoView 定位到指定位置，但需要更复杂处理
        } catch (error) {
            console.error('读取文件失败:', error);
            uni.showToast({
              title: '文件读取失败',
              icon: 'error'
            });
        }
    },

    // 搜索功能
    onSearch() {
        if (!this.searchKeyword.trim()) {
            this.searchResults = [];
            return;
        }

        // 重新加载所有文件进行搜索（简单实现）
        this.searchResults = [];
        this.fileList.forEach(file => {
            uni.request({
                url: file.path,
                method: 'GET',
                header: {
                    'Content-Type': 'text/plain'
                },
                success: (res) => {
                    const lines = res.data.split('\n');
                    lines.forEach((line, index) => {
                        if (line.includes(this.searchKeyword)) {
                            this.searchResults.push({
                                fileName: file.name,
                                file: file.path,
                                lineIndex: index,
                                lineContent: line.trim()
                            });
                        }
                    });
                },
                fail: (err) => {
                    console.error(`搜索文件 ${file.path} 失败:`, err);
                }
            });
        });
    },

    // 高亮搜索关键词
    highlightText(text, keyword) {
      if (!keyword) return text;
      const regex = new RegExp(`(${keyword})`, 'gi');
      return text.replace(regex, '<span style="background-color: yellow; color: #000;">$1</span>');
    },

    // 返回文件列表
    goBack() {
      this.fileContent = '';
      this.currentFile = '';
      this.searchKeyword = '';
      this.searchResults = [];
    },

    onScrollToLower() {
      // 可以实现加载更多内容，或提示已到底部
      console.log('滚动到底部');
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.search-input {
  flex: 1;
  padding: 10rpx 0;
  font-size: 28rpx;
  border: none;
}

.search-btn {
  background-color: transparent;
  color: #007aff;
  padding: 0 10rpx;
  font-size: 28rpx;
  border: none;
}

.list-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.file-list, .search-results {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.file-item, .result-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.file-item:last-child, .result-item:last-child {
  border-bottom: none;
}

.file-name {
  font-size: 30rpx;
  color: #333;
}

.result-preview {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-top: 10rpx;
}

.content-area {
  height: calc(100vh - 300rpx); /* 减去搜索栏、标题、返回按钮等高度 */
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  margin-top: 20rpx;
  white-space: pre-wrap; /* 保留换行 */
}

.content-text {
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
}

.back-btn {
  position: fixed;
  bottom: 100rpx; /* 避开底部导航栏 */
  right: 40rpx;
  background-color: #007aff;
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.2);
}
</style>